<template>
  <canvas ref="container" class="w-full h-full"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { WebGL } from "../../lib/webgl/WebGL";

const container = ref(null);
const webgl = new WebGL();
let oldTime = Date.now();

const triangle = {
  vertex: new Float32Array([
    1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0,
  ]),
  vertexCount: 6,
};

function initShader(gl) {
  let vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vertexShader,
    `
      attribute vec2 a_Position;
      void main() {
        gl_Position = vec4(a_Position, 0.0, 1.0);
      }
      `
  );
  gl.compileShader(vertexShader);

  let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    fragmentShader,
    `
      precision mediump float;
      uniform vec2 u_resolution;
      uniform float u_delta;
  
      float noise(vec3 p) {
        vec3 i = floor(p);
        vec4 a = dot(i, vec3(1.0, 57.0, 21.0)) + vec4(0.0, 57.0, 21.0, 78.0);
        vec3 f = cos((p - i) * acos(-1.0)) * (-0.5) + 0.5;
        a = mix(sin(cos(a) * a), sin(cos(1.0 + a) * (1.0 + a)), f.x);
        a.xy = mix(a.xz, a.yw, f.y);
        return mix(a.x, a.y, f.z);
      }
  
      float sphere(vec3 p, vec4 spr) {
        return length(spr.xyz - p) - spr.w;
      }
  
      float flame(vec3 p) {
        float d = sphere(p * vec3(1.0, 0.5, 1.0), vec4(0.0,-1.0, 0.0, 1.0));
        return d + (noise(p + vec3(0.0, u_delta * 2.0, 0.0)) + noise(p * 3.0) * 0.5) * 0.25 * p.y;
      }
  
      float scene(vec3 p) {
        return min(100.0 - length(p), abs(flame(p)));
      }
  
      vec4 raymarch(vec3 org, vec3 dir) {
        float d = 0.0;
        float glow = 0.0;
        float eps = 0.02;
        vec3 p = org;
        bool glowed = false;
  
        for(int i = 0; i < 64; i++) {
          d = scene(p) + eps;
          p += d * dir;
          if(d > eps) {
            if(flame(p) < 0.0) {
              glowed = true;
            }
            if(glowed) {
              glow = float(i) / 64.0;
            }
          }
        }
  
        return vec4(p, glow);
      }
  
      void main() {
        vec2 v = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution;
        v.x *= u_resolution.x / u_resolution.y;
  
        vec3 org = vec3(0.0, -2.0, 4.0);
        vec3 dir = normalize(vec3(v.x * 1.6, -v.y, -1.5));
  
        vec4 p = raymarch(org, dir);
        float glow = p.w;
  
        vec4 col = mix(vec4(1.0, 0.5, 0.1, 1.0), vec4(0.1, 0.5, 1.0, 1.0), p.y * 0.02 + 0.4);
  
        gl_FragColor = mix(vec4(0.0, 0.0, 0.0, 1.0), col, pow(glow * 2.0, 4.0));
      }
      `
  );
  gl.compileShader(fragmentShader);

  let program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  gl.useProgram(program);
  gl.program = program;
}

function draw(gl) {
  let vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, triangle.vertex, gl.STATIC_DRAW);

  let a_Position = gl.getAttribLocation(gl.program, "a_Position");
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);
}

function tick(gl, delta) {
  let u_delta = gl.getUniformLocation(gl.program, "u_delta");
  gl.uniform1f(u_delta, delta);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.drawArrays(gl.TRIANGLES, 0, triangle.vertexCount);
}

function init() {
  let canvas = container.value;
  let gl = webgl.initWebGL(canvas);
  initShader(gl);
  draw(gl);

  let resolution = new Float32Array([canvas.clientWidth, canvas.clientHeight]);
  let u_resolution = gl.getUniformLocation(gl.program, "u_resolution");
  gl.uniform2fv(u_resolution, resolution);

  function frame() {
    let newTime = Date.now();
    let delta = (newTime - oldTime) / 1000;

    tick(gl, delta);

    requestAnimationFrame(frame);
  }
  frame();

  window.addEventListener("resize", () => {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);

    let resolution = new Float32Array([
      canvas.clientWidth,
      canvas.clientHeight,
    ]);
    let u_resolution = gl.getUniformLocation(gl.program, "u_resolution");
    gl.uniform2fv(u_resolution, resolution);
  });
}

onMounted(() => {
  init();
});
</script>
